<?php
$senderUid = (int)$_GET['from'];
$reciverUid = (int)$_GET['to'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎聊天</title>
    <style type="text/css">
        .message-mid{
            margin: 0 auto;
            border: solid 1px #666;
            width: 900px;
            height: 400px;
            overflow: hidden;
            background-color:#666;
        }
        .message-mid img{
            float:left;
            width: 218px;
            height: 360px;
        }
        #message-list {
            border: solid 1px #666;
            width: 680px;
            height: 400px;
            overflow: auto;
            float: left;
            background-color:#fff;
        }
        #message-list li{
            list-style: none;
        }
        .message-top{
            margin: 50px auto 0;
            border: solid 1px #666;
            width: 900px;
            height: 70px;
            background:#484A4B;
            overflow: auto;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .message-top p{
            height: 70px;
            line-height:70px;
            color:white;
            padding-left: 20px;
            font-size:26px;
            font-weight:bold;
            margin: 0px;
        }
        #message-send {
            margin: 0px auto;
            border: solid 1px #666;
            width: 900px;
            height: 100px;
            background: #fff;
            position: relative;
            overflow: hidden;
        }
        #submit-message{
            position: absolute;
            top:60px;
            left: 780px;
            background:#484a4b;
            color: #fff;
            width: 100px;
            height: 30px;
            border:none;
            cursor: pointer;

        }
        #message-box {
            width: 100%;
            height: 100%;
            border:none;
            vertical-align: top;
        }
    </style>
    <script type="text/javascript" src="../js/lib/jquery.min.js"></script>
    <script type="text/javascript">
        var reciver_uid = <?php echo $senderUid;?>;
        var sender_uid = <?php echo $reciverUid;?>;
        var url = './GetMessage.php';
        var another = '';
        // 获取cookie
        var getCookie = function getCookie(key) {
            var arr1 = document.cookie.split('; ')
            //["user1=111asdasd", "user2=222gfhft", "user3=333wwwaa"]
            for (var i = 0; i < arr1.length; i++) {
                var arr2 = arr1[i].split('=') //['user1','111asdasd']
                if (arr2[0] === key) {
                    // 对数据进行解码并返回
                    return unescape(arr2[1])
                }
            }
            return null
        }
        var me = getCookie("username");
        $.post('./chat.php',{
        uid:sender_uid,
        way:'talk2'
        },function(data){
            another = data
           $('.message-top p').html(data)
        });


        $(function () {
            get_message_reply(url, reciver_uid, sender_uid, 'get_message1', '');
        });


        //获取消息并应答
        //get_get_message_reply()
        //param request_type  请求类型 详解：
        //      get_message   获取信息
        //      comfrim_read  确认已经读取了信息
        function get_message_reply(url, reciver_uid, sender_uid, request_type, send_data) {
            var setting = {
                url: url,
                data: {
                    'request_type': request_type,
                    'reciver_uid': reciver_uid,
                    'sender_uid': sender_uid,
                    'send_data': send_data,
                },
                type: 'post',
                dataType: 'json',
                success: function (response) {
                    if (response.status == 1) {
                        if (response.response_type == 'is_read') {
                            //将消息写入到消息盒子
                            var messages = response.info;
                            var message_str = '';
                            var id_arr = new Array();
                            for (var i=0;i< messages.length; i++) {
                                
                                id_arr.push(messages[i]['id']);
                                if(messages[i]['sender_uid']==reciver_uid){
                                    message_str += '<li style="text-align: right;padding-right: 10px;">' +  '<span style="font-size:14px;color:blue">'+me + ' ('+messages[i]['send_time']+')' + '</span>'+'<br>' + messages[i]['content'] + '</li>';
                                }else{
                                    message_str += '<li>'+'<span style="font-size:14px;color:blue">'+another + ' ('+ messages[i]['send_time']+')' + '</span>'+ '<br>' + messages[i]['content'] + '</li>';
                                }
                                
                            }
                            $('#message-list').append(message_str);
                            get_message_reply(url, reciver_uid, sender_uid, 'comfrim_read', id_arr);

                        } else if (response.response_type == 'is_connecting') {
                            get_message_reply(url, reciver_uid, sender_uid, 'get_message', '');
                        }
                    }
                }
            };
            $.ajax(setting);
        }
    </script>
</head>
<body>
<div class="message-top">
        <p>客户一</p>
</div>
<div class="message-mid">
<div id="message-list">

</div>
<img src="../imgs/e58d48f2dfe2fc00d8c0c067d04d72b0.jpeg" alt="">
</div>

<div id="message-send">
    <input type="textarea" id="message-box" autocomplete="off"/>
    <input type="button" id="submit-message" value="发送消息">
</div>

<script type="text/javascript">
    //-------------发送消息---------
    $(function () {
        var reciver_uid = <?php echo $reciverUid;?>;
        var sender_uid = <?php echo $senderUid;?>;
        $('#submit-message').on('click', function () {
            var message_content = $('#message-box').val();
            if (message_content != '') {
                $(this).attr('disabled', 'disabled');
                var send_url = './SendMessage.php';
                var send_data = {
                    'message': message_content,
                    'reciver_uid': reciver_uid,
                    'sender_uid': sender_uid,
                };
                $.post(send_url, send_data, function (response) {
                    if (response.status == 1) {
                        $('#message-box').val('');
                        $('#submit-message').removeAttr('disabled');
                        var date = new Date();
                        var Y = date.getFullYear() + '-';
                        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                        var D = date.getDate() + ' ';
                        var h = date.getHours() + ':';
                        var m = date.getMinutes() + ':';
                        var s = date.getSeconds(); 
                        //将上面的拼接到一块
                        var sttr = Y+M+D+h+m+s

                        var message_str = '<li style="text-align: right;padding-right: 10px;">'+'<span style="font-size:14px;color:blue">'+me + ' ('+sttr+')' + '</span>'+'<br>'+send_data.message+ '</li>';
                        $('#message-list').append(message_str);
                    } else {
                        console.log('发送失败!！');
                    }
                }, 'json');

            }

        });

    });
</script>
</body>
</html>
